<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>资产链 - Hyperledger Fabric资产管理系统</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  
  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36D399',
            accent: '#8B5CF6',
            dark: '#1E293B',
            light: '#F8FAFC'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-shadow {
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
      }
      .btn-hover {
        @apply transition-all duration-300 hover:shadow-lg transform hover:-translate-y-1;
      }
      .input-focus {
        @apply focus:ring-2 focus:ring-primary/50 focus:border-primary transition duration-200;
      }
      .animate-fade-in {
        animation: fadeIn 0.5s ease-in-out;
      }
      .animate-slide-up {
        animation: slideUp 0.5s ease-out;
      }
      @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }
      @keyframes slideUp {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
      }
    }
  </style>
</head>
<body class="bg-gray-50 font-inter text-dark min-h-screen flex flex-col">
  <!-- 导航栏 -->
  <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <div class="flex items-center space-x-2">
        <i class="fa fa-link text-primary text-2xl"></i>
        <h1 class="text-xl font-bold text-primary">资产链</h1>
      </div>
      
      <nav class="hidden md:flex items-center space-x-8">
        <a href="#create" class="text-gray-600 hover:text-primary transition-colors">创建资产</a>
        <a href="#query" class="text-gray-600 hover:text-primary transition-colors">查询资产</a>
        <a href="#transfer" class="text-gray-600 hover:text-primary transition-colors">转移资产</a>
        <a href="#stats" class="text-gray-600 hover:text-primary transition-colors">资产统计</a>
      </nav>
      
      <div class="flex items-center space-x-4">
        <button class="md:hidden text-gray-600 focus:outline-none" id="menuToggle">
          <i class="fa fa-bars text-xl"></i>
        </button>
        <div class="relative">
          <button class="flex items-center space-x-1 text-gray-600 hover:text-primary transition-colors">
            <i class="fa fa-user-circle-o text-lg"></i>
            <span class="hidden md:inline">用户</span>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div class="md:hidden h-0 overflow-hidden transition-all duration-300" id="mobileMenu">
      <div class="px-4 py-2 space-y-3 bg-white border-t">
        <a href="#create" class="block py-2 text-gray-600 hover:text-primary transition-colors">创建资产</a>
        <a href="#query" class="block py-2 text-gray-600 hover:text-primary transition-colors">查询资产</a>
        <a href="#transfer" class="block py-2 text-gray-600 hover:text-primary transition-colors">转移资产</a>
        <a href="#stats" class="block py-2 text-gray-600 hover:text-primary transition-colors">资产统计</a>
      </div>
    </div>
  </header>

  <main class="flex-grow container mx-auto px-4 py-8">
    <!-- 状态指示器 -->
    <div class="fixed top-20 right-4 z-50">
      <div id="statusIndicator" class="hidden bg-green-50 border border-green-200 text-green-700 px-4 py-2 rounded-lg shadow-md animate-fade-in flex items-center space-x-2">
        <i class="fa fa-check-circle"></i>
        <span id="statusMessage">操作成功</span>
      </div>
    </div>
    
    <!-- 欢迎区域 -->
    <section class="mb-12 text-center animate-fade-in">
      <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold text-dark mb-4">Hyperledger Fabric 资产管理系统</h2>
      <p class="text-gray-600 max-w-2xl mx-auto text-lg mb-8">通过区块链技术实现资产的安全、透明和不可篡改管理</p>
      <div class="flex flex-wrap justify-center gap-4">
        <a href="#create" class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg shadow-md btn-hover flex items-center">
          <i class="fa fa-plus-circle mr-2"></i> 创建资产
        </a>
        <a href="#query" class="bg-white border border-gray-300 text-gray-700 px-6 py-3 rounded-lg shadow-sm btn-hover flex items-center">
          <i class="fa fa-search mr-2"></i> 查询资产
        </a>
      </div>
    </section>
    
    <!-- 主要功能卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
      <!-- 创建资产卡片 -->
      <section id="create" class="bg-white rounded-xl p-6 card-shadow animate-slide-up">
        <div class="flex items-center mb-4">
          <div class="bg-primary/10 p-3 rounded-lg mr-4">
            <i class="fa fa-plus-circle text-primary text-xl"></i>
          </div>
          <h3 class="text-xl font-bold">创建资产</h3>
        </div>
        <form id="createForm" class="space-y-4">
          <div>
            <label for="createId" class="block text-sm font-medium text-gray-700 mb-1">资产ID</label>
            <input type="text" id="createId" name="createId" required
                  class="w-full px-4 py-2 border border-gray-300 rounded-lg input-focus"
                  placeholder="输入唯一的资产ID">
          </div>
          <div>
            <label for="createOwner" class="block text-sm font-medium text-gray-700 mb-1">所有者</label>
            <input type="text" id="createOwner" name="createOwner" required
                  class="w-full px-4 py-2 border border-gray-300 rounded-lg input-focus"
                  placeholder="输入资产所有者">
          </div>
          <div>
            <label for="createName" class="block text-sm font-medium text-gray-700 mb-1">资产名称</label>
            <input type="text" id="createName" name="createName" required
                  class="w-full px-4 py-2 border border-gray-300 rounded-lg input-focus"
                  placeholder="输入资产名称">
          </div>
          <div>
            <label for="createInfo" class="block text-sm font-medium text-gray-700 mb-1">资产信息</label>
            <textarea id="createInfo" name="createInfo" rows="3"
                      class="w-full px-4 py-2 border border-gray-300 rounded-lg input-focus"
                      placeholder="输入资产详细信息"></textarea>
          </div>
          <button type="submit" 
                  class="w-full bg-primary hover:bg-primary/90 text-white py-3 rounded-lg shadow-md btn-hover flex items-center justify-center">
            <i class="fa fa-chain mr-2"></i> 资产上链
          </button>
        </form>
      </section>
      
      <!-- 查询资产卡片 -->
      <section id="query" class="bg-white rounded-xl p-6 card-shadow animate-slide-up" style="animation-delay: 0.1s">
        <div class="flex items-center mb-4">
          <div class="bg-accent/10 p-3 rounded-lg mr-4">
            <i class="fa fa-search text-accent text-xl"></i>
          </div>
          <h3 class="text-xl font-bold">查询资产</h3>
        </div>
        <form id="queryForm" class="space-y-4">
          <div>
            <label for="queryId" class="block text-sm font-medium text-gray-700 mb-1">资产ID</label>
            <input type="text" id="queryId" name="queryId" required
                  class="w-full px-4 py-2 border border-gray-300 rounded-lg input-focus"
                  placeholder="输入要查询的资产ID">
          </div>
          <button type="submit" 
                  class="w-full bg-accent hover:bg-accent/90 text-white py-3 rounded-lg shadow-md btn-hover flex items-center justify-center">
            <i class="fa fa-search mr-2"></i> 查询资产
          </button>
        </form>
        
        <!-- 查询结果 -->
        <div id="queryResult" class="mt-6 hidden animate-fade-in">
          <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
            <h4 class="font-medium text-gray-700 mb-3">资产详情</h4>
            <div class="grid grid-cols-2 gap-3 text-sm">
              <div>
                <span class="text-gray-500">资产ID:</span>
                <span id="resultId" class="font-medium ml-2"></span>
              </div>
              <div>
                <span class="text-gray-500">所有者:</span>
                <span id="resultOwner" class="font-medium ml-2"></span>
              </div>
              <div>
                <span class="text-gray-500">资产名称:</span>
                <span id="resultName" class="font-medium ml-2"></span>
              </div>
              <div>
                <span class="text-gray-500">创建时间:</span>
                <span id="resultTimestamp" class="font-medium ml-2"></span>
              </div>
              <div class="col-span-2 mt-2">
                <span class="text-gray-500">资产信息:</span>
                <div id="resultInfo" class="mt-1 p-2 bg-white rounded border border-gray-200"></div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 转移资产卡片 -->
      <section id="transfer" class="bg-white rounded-xl p-6 card-shadow animate-slide-up" style="animation-delay: 0.2s">
        <div class="flex items-center mb-4">
          <div class="bg-secondary/10 p-3 rounded-lg mr-4">
            <i class="fa fa-exchange text-secondary text-xl"></i>
          </div>
          <h3 class="text-xl font-bold">转移资产</h3>
        </div>
        <form id="transferForm" class="space-y-4">
          <div>
            <label for="transferId" class="block text-sm font-medium text-gray-700 mb-1">资产ID</label>
            <input type="text" id="transferId" name="transferId" required
                  class="w-full px-4 py-2 border border-gray-300 rounded-lg input-focus"
                  placeholder="输入要转移的资产ID">
          </div>
          <div>
            <label for="newOwner" class="block text-sm font-medium text-gray-700 mb-1">新所有者</label>
            <input type="text" id="newOwner" name="newOwner" required
                  class="w-full px-4 py-2 border border-gray-300 rounded-lg input-focus"
                  placeholder="输入新的资产所有者">
          </div>
          <button type="submit" 
                  class="w-full bg-secondary hover:bg-secondary/90 text-white py-3 rounded-lg shadow-md btn-hover flex items-center justify-center">
            <i class="fa fa-exchange mr-2"></i> 转移资产
          </button>
        </form>
      </section>
    </div>
    
    <!-- 资产统计 -->
    <section id="stats" class="bg-white rounded-xl p-6 card-shadow mb-12">
      <div class="flex items-center justify-between mb-6">
        <div class="flex items-center">
          <div class="bg-blue-100 p-3 rounded-lg mr-4">
            <i class="fa fa-bar-chart text-blue-600 text-xl"></i>
          </div>
          <h3 class="text-xl font-bold">资产统计</h3>
        </div>
        <div class="flex space-x-2">
          <button class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded-md transition-colors">
            <i class="fa fa-refresh mr-1"></i> 刷新
          </button>
        </div>
      </div>
      
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- 图表 -->
        <div class="bg-gray-50 p-4 rounded-lg">
          <h4 class="text-sm font-medium text-gray-700 mb-4">资产分布</h4>
          <div class="h-64">
            <canvas id="assetChart"></canvas>
          </div>
        </div>
        
        <!-- 资产概览 -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div class="bg-gray-50 p-4 rounded-lg">
            <div class="flex items-center justify-between mb-2">
              <h4 class="text-sm font-medium text-gray-700">总资产数</h4>
              <i class="fa fa-database text-gray-400"></i>
            </div>
            <p class="text-3xl font-bold" id="totalAssets">0</p>
            <p class="text-xs text-gray-500 mt-1">较昨日 <span class="text-green-500">+2.4%</span></p>
          </div>
          
          <div class="bg-gray-50 p-4 rounded-lg">
            <div class="flex items-center justify-between mb-2">
              <h4 class="text-sm font-medium text-gray-700">今日新增</h4>
              <i class="fa fa-plus-circle text-gray-400"></i>
            </div>
            <p class="text-3xl font-bold" id="newAssets">0</p>
            <p class="text-xs text-gray-500 mt-1">较昨日 <span class="text-green-500">+12.8%</span></p>
          </div>
          
          <div class="bg-gray-50 p-4 rounded-lg">
            <div class="flex items-center justify-between mb-2">
              <h4 class="text-sm font-medium text-gray-700">活跃所有者</h4>
              <i class="fa fa-users text-gray-400"></i>
            </div>
            <p class="text-3xl font-bold" id="activeOwners">0</p>
            <p class="text-xs text-gray-500 mt-1">较昨日 <span class="text-green-500">+5.1%</span></p>
          </div>
          
          <div class="bg-gray-50 p-4 rounded-lg">
            <div class="flex items-center justify-between mb-2">
              <h4 class="text-sm font-medium text-gray-700">今日转移</h4>
              <i class="fa fa-exchange text-gray-400"></i>
            </div>
            <p class="text-3xl font-bold" id="todayTransfers">0</p>
            <p class="text-xs text-gray-500 mt-1">较昨日 <span class="text-red-500">-3.2%</span></p>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 最近操作记录 -->
    <section class="bg-white rounded-xl p-6 card-shadow mb-12">
      <div class="flex items-center justify-between mb-6">
        <div class="flex items-center">
          <div class="bg-gray-100 p-3 rounded-lg mr-4">
            <i class="fa fa-history text-gray-600 text-xl"></i>
          </div>
          <h3 class="text-xl font-bold">最近操作记录</h3>
        </div>
        <div class="flex space-x-2">
          <button class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded-md transition-colors">
            查看全部
          </button>
        </div>
      </div>
      
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作类型</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">资产ID</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">相关用户</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
            </tr>
          </thead>
          <tbody id="recentOperations" class="bg-white divide-y divide-gray-200">
            <!-- 记录将通过JavaScript动态添加 -->
            <tr class="text-center">
              <td colspan="5" class="px-6 py-10 text-gray-500">暂无操作记录</td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>
  </main>

  <footer class="bg-dark text-white py-8">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <div class="flex items-center space-x-2 mb-4">
            <i class="fa fa-link text-primary text-2xl"></i>
            <h2 class="text-xl font-bold">资产链</h2>
          </div>
          <p class="text-gray-400 text-sm">基于Hyperledger Fabric的资产上链管理系统，实现资产的安全、透明和不可篡改管理。</p>
        </div>
        
        <div>
          <h3 class="text-lg font-medium mb-4">功能</h3>
          <ul class="space-y-2 text-gray-400">
            <li><a href="#create" class="hover:text-primary transition-colors">资产上链</a></li>
            <li><a href="#query" class="hover:text-primary transition-colors">资产查询</a></li>
            <li><a href="#transfer" class="hover:text-primary transition-colors">资产转移</a></li>
            <li><a href="#stats" class="hover:text-primary transition-colors">资产统计</a></li>
          </ul>
        </div>
        
        <div>
          <h3 class="text-lg font-medium mb-4">资源</h3>
          <ul class="space-y-2 text-gray-400">
            <li><a href="#" class="hover:text-primary transition-colors">文档</a></li>
            <li><a href="#" class="hover:text-primary transition-colors">API参考</a></li>
            <li><a href="#" class="hover:text-primary transition-colors">常见问题</a></li>
            <li><a href="#" class="hover:text-primary transition-colors">社区支持</a></li>
          </ul>
        </div>
        
        <div>
          <h3 class="text-lg font-medium mb-4">联系我们</h3>
          <ul class="space-y-2 text-gray-400">
            <li class="flex items-center"><i class="fa fa-envelope-o mr-2"></i> support@assetchain.com</li>
            <li class="flex items-center"><i class="fa fa-phone mr-2"></i> +86 123 4567 8910</li>
            <li class="flex items-center"><i class="fa fa-map-marker mr-2"></i> 北京市海淀区科技园</li>
          </ul>
          <div class="flex space-x-4 mt-4">
            <a href="#" class="text-gray-400 hover:text-primary transition-colors"><i class="fa fa-github text-xl"></i></a>
            <a href="#" class="text-gray-400 hover:text-primary transition-colors"><i class="fa fa-twitter text-xl"></i></a>
            <a href="#" class="text-gray-400 hover:text-primary transition-colors"><i class="fa fa-linkedin text-xl"></i></a>
          </div>
        </div>
      </div>
      
      <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm">
        <p>© 2025 资产链. 保留所有权利.</p>
      </div>
    </div>
  </footer>

  <script>
    // 导航栏滚动效果
    const navbar = document.getElementById('navbar');
    window.addEventListener('scroll', () => {
      if (window.scrollY > 10) {
        navbar.classList.add('py-2', 'shadow');
        navbar.classList.remove('py-3');
      } else {
        navbar.classList.add('py-3');
        navbar.classList.remove('py-2', 'shadow');
      }
    });
    
    // 移动端菜单切换
    const menuToggle = document.getElementById('menuToggle');
    const mobileMenu = document.getElementById('mobileMenu');
    menuToggle.addEventListener('click', () => {
      if (mobileMenu.classList.contains('h-0')) {
        mobileMenu.classList.remove('h-0');
        mobileMenu.classList.add('h-auto');
        menuToggle.innerHTML = '<i class="fa fa-times text-xl"></i>';
      } else {
        mobileMenu.classList.add('h-0');
        mobileMenu.classList.remove('h-auto');
        menuToggle.innerHTML = '<i class="fa fa-bars text-xl"></i>';
      }
    });
    
    // 表单提交处理
    document.getElementById('createForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      const formData = new FormData(e.target);
      const assetData = Object.fromEntries(formData.entries());
      
      // 显示状态
      showStatus('正在创建资产...', 'info');
      
      try {
        // 模拟API调用
        await simulateApiCall(1500);
        
        // 记录操作
        addOperationRecord('创建资产', assetData.createId, assetData.createOwner);
        
        // 显示成功状态
        showStatus('资产创建成功！', 'success');
        
        // 重置表单
        e.target.reset();
      } catch (error) {
        showStatus('资产创建失败: ' + error.message, 'error');
      }
    });
    
    document.getElementById('queryForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      const assetId = document.getElementById('queryId').value;
      
      // 显示状态
      showStatus('正在查询资产...', 'info');
      
      try {
        // 模拟API调用
        const asset = await simulateQueryApi(assetId);
        
        // 显示结果
        document.getElementById('queryResult').classList.remove('hidden');
        document.getElementById('resultId').textContent = asset.id;
        document.getElementById('resultOwner').textContent = asset.owner;
        document.getElementById('resultName').textContent = asset.name;
        document.getElementById('resultInfo').textContent = asset.info;
        document.getElementById('resultTimestamp').textContent = new Date().toLocaleString();
        
        // 记录操作
        addOperationRecord('查询资产', assetId, asset.owner);
        
        // 显示成功状态
        showStatus('资产查询成功！', 'success');
      } catch (error) {
        document.getElementById('queryResult').classList.add('hidden');
        showStatus('资产查询失败: ' + error.message, 'error');
      }
    });
    
    document.getElementById('transferForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      const formData = new FormData(e.target);
      const transferData = Object.fromEntries(formData.entries());
      
      // 显示状态
      showStatus('正在转移资产...', 'info');
      
      try {
        // 模拟API调用
        await simulateApiCall(1800);
        
        // 记录操作
        addOperationRecord('转移资产', transferData.transferId, transferData.newOwner);
        
        // 显示成功状态
        showStatus('资产转移成功！', 'success');
        
        // 重置表单
        e.target.reset();
      } catch (error) {
        showStatus('资产转移失败: ' + error.message, 'error');
      }
    });
    
    // 显示状态消息
    function showStatus(message, type = 'success') {
      const statusIndicator = document.getElementById('statusIndicator');
      const statusMessage = document.getElementById('statusMessage');
      
      // 设置消息内容
      statusMessage.textContent = message;
      
      // 设置样式
      statusIndicator.classList.remove('hidden', 'bg-green-50', 'border-green-200', 'text-green-700', 
                                     'bg-red-50', 'border-red-200', 'text-red-700',
                                     'bg-blue-50', 'border-blue-200', 'text-blue-700');
      
      if (type === 'success') {
        statusIndicator.classList.add('bg-green-50', 'border-green-200', 'text-green-700');
      } else if (type === 'error') {
        statusIndicator.classList.add('bg-red-50', 'border-red-200', 'text-red-700');
      } else if (type === 'info') {
        statusIndicator.classList.add('bg-blue-50', 'border-blue-200', 'text-blue-700');
      }
      
      // 显示指示器
      statusIndicator.classList.remove('hidden');
      
      // 3秒后隐藏
      setTimeout(() => {
        statusIndicator.classList.add('hidden');
      }, 3000);
    }
    
    // 模拟API调用
    function simulateApiCall(delay) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          // 模拟70%的成功率
          if (Math.random() > 0.3) {
            resolve();
          } else {
            reject(new Error('网络连接失败，请重试'));
          }
        }, delay);
      });
    }
    
    // 模拟查询API
    function simulateQueryApi(assetId) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          // 模拟70%的成功率
          if (Math.random() > 0.3) {
            resolve({
              id: assetId,
              owner: '张三',
              name: '智能合约资产',
              info: '这是一个基于Hyperledger Fabric的智能合约资产，包含完整的所有权记录和交易历史。',
              timestamp: new Date().toISOString()
            });
          } else {
            reject(new Error('未找到该资产'));
          }
        }, 1200);
      });
    }
    
    // 添加操作记录
    function addOperationRecord(type, assetId, user) {
      const operationsTable = document.getElementById('recentOperations');
      
      // 检查是否有"暂无操作记录"的行
      if (operationsTable.querySelector('td[colspan="5"]')) {
        operationsTable.innerHTML = '';
      }
      
      // 创建新行
      const row = document.createElement('tr');
      row.className = 'hover:bg-gray-50 transition-colors';
      
      // 设置操作类型样式
      let typeClass = '';
      let typeIcon = '';
      
      switch (type) {
        case '创建资产':
          typeClass = 'text-green-600';
          typeIcon = '<i class="fa fa-plus-circle mr-1"></i>';
          break;
        case '查询资产':
          typeClass = 'text-blue-600';
          typeIcon = '<i class="fa fa-search mr-1"></i>';
          break;
        case '转移资产':
          typeClass = 'text-purple-600';
          typeIcon = '<i class="fa fa-exchange mr-1"></i>';
          break;
        default:
          typeClass = 'text-gray-600';
      }
      
      // 设置行内容
      row.innerHTML = `
        <td class="px-6 py-4 whitespace-nowrap">
          <span class="${typeClass}">${typeIcon}${type}</span>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <div class="text-sm font-medium text-gray-900">${assetId}</div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <div class="flex items-center">
            <div class="flex-shrink-0 h-8 w-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-500">
              ${user.charAt(0)}
            </div>
            <div class="ml-3">
              <div class="text-sm font-medium text-gray-900">${user}</div>
            </div>
          </div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
          ${new Date().toLocaleString()}
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
            成功
          </span>
        </td>
      `;
      
      // 添加到表格开头
      operationsTable.insertBefore(row, operationsTable.firstChild);
      
      // 限制最多显示10条记录
      const rows = operationsTable.querySelectorAll('tr');
      if (rows.length > 10) {
        operationsTable.removeChild(rows[rows.length - 1]);
      }
    }
    
    // 初始化图表
    document.addEventListener('DOMContentLoaded', () => {
      // 模拟数据
      const ctx = document.getElementById('assetChart').getContext('2d');
      
      const assetChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
          labels: ['数字资产', '实物资产', '知识产权', '金融资产'],
          datasets: [{
            data: [35, 25, 20, 20],
            backgroundColor: [
              '#165DFF',
              '#36D399',
              '#8B5CF6',
              '#F59E0B'
            ],
            borderWidth: 0,
            hoverOffset: 10
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'bottom',
              labels: {
                padding: 20,
                usePointStyle: true,
                pointStyle: 'circle'
              }
            },
            tooltip: {
              padding: 10,
              cornerRadius: 4,
              callbacks: {
                label: function(context) {
                  return context.label + ': ' + context.raw + '%';
                }
              }
            }
          },
          cutout: '70%'
        }
      });
      
      // 设置统计数据
      document.getElementById('totalAssets').textContent = '2,548';
      document.getElementById('newAssets').textContent = '32';
      document.getElementById('activeOwners').textContent = '156';
      document.getElementById('todayTransfers').textContent = '18';
    });
    
    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        
        // 如果是移动端菜单，点击后关闭
        if (!mobileMenu.classList.contains('h-0')) {
          mobileMenu.classList.add('h-0');
          mobileMenu.classList.remove('h-auto');
          menuToggle.innerHTML = '<i class="fa fa-bars text-xl"></i>';
        }
        
        document.querySelector(this.getAttribute('href')).scrollIntoView({
          behavior: 'smooth'
        });
      });
    });
  </script>
</body>
</html>
    